<template>
	<div style="position: relative;">
		<div class="printbtn" @click="printFun">
			成绩单打印
			<span style="color:#f00;">（为了打印文件的整洁请先调整为1920的分辨率再使用打印）</span>
		</div>
		<div class="body" id="pdfWrap">
			<div class="header" style="color: blue;display: flex;align-items: center;justify-content: center;font-size: 36px;">
				<!-- <img src="../../assets/logo2.png" /> -->
				第二课堂成绩单
				</div>
			<div class="mainbody">
				<div class="mainleft Grid-cell">
					<div class="tabtitle">
						个人简介
						<span>Personal profile</span>
					</div>
					<div class="tabmain">
						<div class="tabmainb">
							<div class="left">
								<div class="tablist">
									<img src="../../assets/name@2x.png" />
									<span>姓名：{{ myinfo.Name }}</span>
								</div>
								<div class="tablist">
									<img src="../../assets/number@2x.png" />
									<span>学号：{{ myinfo.UserNo }}</span>
								</div>
								<div class="tablist">
									<img src="../../assets/grade@2x.png" />
									<span>年级：{{ myinfo.Grade }}</span>
								</div>
							</div>
							<div class="center">
								<div class="tablist">
									<img src="../../assets/class@2x.png" />
									<span>班级：{{ myinfo.ClassName }}</span>
								</div>
								<div class="tablist">
									<img src="../../assets/student@2x.png" />
									<span>学院： {{ myinfo.DepartName }}</span>
								</div>
								<!-- <div class="tablist">
								<img src="../../assets/contact information@2x.png"><span>联系方式： 18255108231</span>
							</div> -->
							</div>
						</div>
						<div class="right">
							<div class="tabimg">
								<img :src="imgList(totalScore).img" />
								<!-- ../../assets/medal@2x.png -->
							</div>
							<div class="tabt">{{ totalScore.toFixed(2) }}</div>
							<div class="tabp">评定：{{ imgList(totalScore).judge }}</div>
						</div>
						<div class="bg"></div>
					</div>
				</div>
				<div class="mainright Grid-cell">
					<div class="tabtitle">
						工作履历
						<span>Work history</span>
					</div>
					<div class="tabWork">
						<div class="boxmaina" style="background:#d5f4fb;border-bottom:1px solid #fff;">
							<div style="color:#000;width:45%;">职务全称</div>
							<div style="color:#000;width:40%;">学期</div>
							<div style="color:#000;width:15%;">分值</div>
						</div>
						<div class="box-tha">
							<div class="box-Right boxa">
								<div class="boxmain" v-for="(item, i) in UserPostList" :key="i">
									<div style="width:45%;">{{ item.Title }}</div>
									<div style="width:40%;">{{ item.SemesterName }}</div>
									<div style="width:15%;">{{ item.Score }}</div>
								</div>
								<div class="nothing" v-if="UserPostList.length == 0"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="mainbody">
				<div class="Grid-cell">
					<div class="mainlefta">
						<div class="bodytitle">
							<div class="ra">{{ scoreList[0].Name }}（德育：{{ scoreList[0].totalScore }} 分）</div>
							<span @click="$router.push(`ScoreRecord?id=${scoreList[0].ID}&Name=${scoreList[0].Name}`)">其他&nbsp;&nbsp;></span>
						</div>
						<div class="bodymain">
							<div class="box-th">
								<div class="boxLeft "><div>活动类别</div></div>
								<div class="box-Right box-R3">
									<div class="boxmain flex">
										<div class="cell flex flex-1">
											<div class="tit flex-1">活动项目</div>
											<div class="con">积分值</div>
										</div>
										<div class="cell flex flex-1">
											<div class="tit flex-1">活动项目</div>
											<div class="con">积分值</div>
										</div>
									</div>
								</div>
							</div>
							<div class="box-tr flex" v-for="(list, d) in scoreList[0].data" :key="d">
								<div class="boxLeft boxLeft2">
									<div>{{ list.ActivityTypeName }}</div>
								</div>
								<div class="box-Right box-R2 flex-1">
									<div class="boxmain">
										<div class="cell flex" v-for="(sublist, d) in list.Child" :key="d" v-if="sublist.SumScore != 0">
											<div class="celltit flex-1">{{ sublist.ActivityTypeName }}</div>
											<div class="cellcon">{{ sublist.SumScore }}</div>
										</div>
										<div class="nothing" v-if="list.Child.filter(arr => arr.SumScore != 0).length == 0"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="mainlefta" style="margin-top:20px;">
						<div class="bodytitle">
							<div class="ra">{{ scoreList[1].Name }}（智育：{{ scoreList[1].totalScore }} 分）</div>
							<span @click="$router.push(`ScoreRecord?id=${scoreList[1].ID}&Name=${scoreList[1].Name}`)">其他&nbsp;&nbsp;></span>
						</div>
						<div class="bodymain">
							<div class="box-th">
								<div class="boxLeft "><div>活动类别</div></div>
								<div class="box-Right box-R3">
									<div class="boxmain flex">
										<div class="cell flex flex-1">
											<div class="tit flex-1">活动项目</div>
											<div class="con">积分值</div>
										</div>
										<div class="cell flex flex-1">
											<div class="tit flex-1">活动项目</div>
											<div class="con">积分值</div>
										</div>
									</div>
								</div>
							</div>
							<div class="box-tr flex" v-for="(list, e) in scoreList[1].data" :key="e">
								<div class="boxLeft boxLeft2">
									<div>{{ list.ActivityTypeName }}</div>
								</div>
								<div class="box-Right box-R2 flex-1">
									<div class="boxmain">
										<div class="cell flex" v-for="(sublist, n) in list.Child" :key="n" v-if="sublist.SumScore != 0">
											<div class="celltit flex-1">{{ sublist.ActivityTypeName }}</div>
											<div class="cellcon">{{ sublist.SumScore }}</div>
										</div>
										<div class="nothing" v-if="list.Child.filter(arr => arr.SumScore != 0).length == 0"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="Grid-cell">
					<div class="mainlefta">
						<div class="bodytitle">
							<div class="ra">{{ scoreList[2].Name }}（美育、体育：{{ scoreList[2].totalScore }} 分）</div>
							<span @click="$router.push(`ScoreRecord?id=${scoreList[2].ID}&Name=${scoreList[2].Name}`)">其他&nbsp;&nbsp;></span>
						</div>
						<div class="bodymain">
							<div class="box-th">
								<div class="boxLeft "><div>活动类别</div></div>
								<div class="box-Right box-R3">
									<div class="boxmain flex">
										<div class="cell flex flex-1">
											<div class="tit flex-1">活动项目</div>
											<div class="con">积分值</div>
										</div>
										<div class="cell flex flex-1">
											<div class="tit flex-1">活动项目</div>
											<div class="con">积分值</div>
										</div>
									</div>
								</div>
							</div>
							<div class="box-tr flex" v-for="(list, e) in scoreList[2].data" :key="e">
								<div class="boxLeft boxLeft2">
									<div>{{ list.ActivityTypeName }}</div>
								</div>
								<div class="box-Right box-R2 flex-1">
									<div class="boxmain">
										<div class="cell flex" v-for="(sublist, e) in list.Child" :key="e" v-if="sublist.SumScore != 0">
											<div class="celltit flex-1">{{ sublist.ActivityTypeName }}</div>
											<div class="cellcon">{{ sublist.SumScore }}</div>
										</div>
										<div class="nothing" v-if="list.Child.filter(arr => arr.SumScore != 0).length == 0"></div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="mainlefta" style="margin-top:15px;">
						<div class="bodytitle">
							<div class="ra">{{ scoreList[3].Name }}（劳育：{{ scoreList[3].totalScore }} 分）</div>
							<span @click="$router.push(`ScoreRecord?id=${scoreList[3].ID}&Name=${scoreList[3].Name}`)">其他&nbsp;&nbsp;></span>
						</div>
						<div class="bodymain">
							<div class="box-th">
								<div class="boxLeft "><div>活动类别</div></div>
								<div class="box-Right box-R3">
									<div class="boxmain flex">
										<div class="cell flex flex-1">
											<div class="tit flex-1">活动项目</div>
											<div class="con">积分值</div>
										</div>
										<div class="cell flex flex-1">
											<div class="tit flex-1">活动项目</div>
											<div class="con">积分值</div>
										</div>
									</div>
								</div>
							</div>
							<div class="box-tr flex" v-for="(list, f) in scoreList[3].data" :key="f">
								<div class="boxLeft boxLeft2">
									<div>{{ list.ActivityTypeName }}</div>
								</div>
								<div class="box-Right box-R2 flex-1">
									<div class="boxmain">
										<div class="cell flex" v-for="(sublist, f) in list.Child" :key="f" v-if="sublist.SumScore != 0">
											<div class="celltit flex-1">{{ sublist.ActivityTypeName }}</div>
											<div class="cellcon">{{ sublist.SumScore }}</div>
										</div>
										<div class="nothing" v-if="list.Child.filter(arr => arr.SumScore != 0).length == 0"></div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="mainlefta" style="margin-top:15px;position:relative">
						<div class="boxmore" @click="seeList('UserPrize')">更多&nbsp;&nbsp;></div>
						<div class="bodymain">
							<div class="boxmaina">
								<div>活动名称</div>
								<div>奖项</div>
								<div>积分</div>
							</div>
							<div class="box-tha">
								<div class="box-Right boxa">
									<div class="boxmain" v-for="(item, i) in prizesList.filter((m,n) => n<2)" :key="i">
										<div>{{ item.ActivityTitle }}</div>
										<div>{{ item.ActivityTypePrizeTitle }}{{ item.PrizeTitle?' | '+item.PrizeTitle:'' }}</div>
										<div>{{ item.PrizeScore }}</div>
									</div>
									<div class="nothing" v-if="prizesList.length == 0"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import moment from 'moment';
import html2Canvas from 'html2canvas';
import JSPDF from 'jspdf';
import Cache from '@/utils/cache';
import { UserDoGetScoreList, UserCenterDoGetSumScoreList, UserGetActivityTypeListByParentIDCommon, GetPrizePageListCenter,UserCenterDoGetUserPostList } from '@/api/follow';
export default {
	props:{
		ActivityTypeListByParentID:Array
	},
	data() {
		return {
			scoreList: [{ Name: '' }, { Name: '' }, { Name: '' }, { Name: '' }],
			ActivityTypeList: [],
			listone: [],
			myinfo: Cache.get('myInfo'),
			prizesList: [],
			// totalScore: Cache.get('score'),
			UserPostList:[]
		};
	},
	computed:{
	     totalScore(){
	       return this.$store.state.score;
	     }
	  },
	mounted() {
		console.log(333)
		this.GetSumScoreList();
		this.getOtherList();
		this.getList()
	},
	methods: {
		moment,
		async getOtherList() {
			let postres = await UserCenterDoGetUserPostList()
			this.UserPostList = postres.data.data
			// let res = await UserDoGetScoreList();
			// let scoreList = res.data.data;
			// let scoreAll = 0;
			// for (let i = 0; i < scoreList.length; i++) {
			// 	if (scoreList[i].TotalScore) {
			// 		scoreAll = scoreAll + scoreList[i].TotalScore;
			// 	}
			// }
			// console.log(111)
			// this.totalScore = scoreAll;
		},
		imgList(totalScore) {
			let type = 0;
			if (totalScore < 10) {
				type = 0;
			}
			if (totalScore >= 10 && totalScore < 20) {
				type = 1;
			}
			if (totalScore >= 20 && totalScore < 30) {
				type = 2;
			}
			if (totalScore >= 30 && totalScore < 40) {
				type = 3;
			}
			if (totalScore >= 40) {
				type = 4;
			}
			switch (type) {
				case 0:
					return { img: require('../../assets/medal_unqualified@2x(1).png'), judge: '不合格' };
					break;
				case 1:
					return { img: require('../../assets/medal_qualified@2x(1).png'), judge: '合格' };
					break;
				case 2:
					return { img: require('../../assets/medal_unqualified@2x.png'), judge: '中等' };
					break;
				case 3:
					return { img: require('../../assets/medal_qualified@2x.png'), judge: '良好' };
					break;
				case 4:
					return { img: require('../../assets/medal@2x.png'), judge: '优秀' };
					break;
			}
		},

		/* if (num >= 40) printf("优秀");
			else if (num >= 30 && num <= 40) printf("合格");
			else if (num >= 20 && num <= 30) printf("中等");
			else if (num >= 10 && num <= 20) printf("良好");
			else if (num <= 10) printf("不合格"); */

		async GetSumScoreList() {
			// let res = await UserGetActivityTypeListByParentIDCommon({
			// 	parentID: ''
			// });
			let list = this.ActivityTypeListByParentID
			for (let i = 0, len = list.length; i < len; i++) {
				let data = {};
				data.activityTypeID = list[i].ID;
				let res1 = await UserCenterDoGetSumScoreList(data);
				list[i] = { ...list[i], data: res1.data.data, totalScore: res1.data.total };
			}
			this.scoreList = list;
		},
		async getList() {
			let data = {};
			let res = await GetPrizePageListCenter(data);
			this.prizesList = res.data.data;
		},
		seeList(name) {
			this.$router.push({
				name: name
			});
		},
		async printFun() {
			let i = 0;
			let pdfDom = document.querySelector('#pdfWrap'); //这里绑定你要转换的页面
			// pdfDom.style.background = "#FFFFFF";
			let _this = this;
			let pdfPage = null;

			html2Canvas(pdfDom, {
				//开始截图,这里可以设置一些截图时的属性
				logging: false,
				backgroundColor: 'white'
			}).then(canvas => {
				// 开始将图片转换为PDF
				var contentWidth = canvas.width;
				var contentHeight = canvas.height;
				//一页pdf显示html页面生成的canvas高度;
				var pageHeight = (contentWidth / 841.89) * 592.28;
				//未生成pdf的html页面高度
				var leftHeight = contentHeight;
				//页面偏移
				var position = 0;
				//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
				var imgWidth = 841.89;
				var imgHeight = (841.89 / contentWidth) * contentHeight;
				var pageData = canvas.toDataURL();
				var pdf = new JSPDF('l', 'pt', 'a4');
				//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
				//当内容未超过pdf一页显示的范围，无需分页
				if (leftHeight < pageHeight) {
					pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
				} else {
					while (leftHeight > 0) {
						pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
						leftHeight -= pageHeight;
						position -= 592.28;
						//避免添加空白页
						if (leftHeight > 0) {
							pdf.addPage();
						}
					}
				}
				pdf.save(`${this.myinfo.Name}${this.myinfo.UserNo}` + '.pdf');
			});
		}
	}
};
</script>

<style lang="less" scoped>
.printbtn {
	position: absolute;
	top: 0px;
	right: 0px;
	// width: 140px;
	height: 34px;
	line-height: 34px;
	text-align: center;
	float: right;
	color: #4577eb;
	background: #fff;
	box-shadow: 0px 10px 22px rgba(0, 0, 0, 0.06);
	border: none;
	padding: 0 10px;
	border-radius: 10px;
	font-size: 12px;
	cursor: pointer;
	z-index:999;
}
.nothing {
	height: 62px;
	line-height: 100px;
	text-align: center;
	background: url(../../assets/nothing.png) center center no-repeat;
	color: #999 !important;
	background-size: 40px 40px;
	font-size: 14px;
}

.flex {
	display: flex;
}

.flex-1 {
	flex: 1;
}

.box-th {
	height: 40px;
	line-height: 40px;

	.boxmain {
		overflow: hidden;
		text-align: center;
		font-weight: bold;

		.con {
			width: 60px;
		}
	}
}

.box-tr {
	border-top: 1px solid #fff;
	text-align: center;
	min-height: 40px;

	.boxLeft {
		width: 100px;
		display: -moz-box;
		-moz-box-pack: center;
		-moz-box-align: center;

		/* Safari、Opera 以及 Chrome */
		display: -webkit-box;
		-webkit-box-pack: center;
		-webkit-box-align: center;

		/* W3C */
		display: flex;
		box-pack: center;
		box-align: center;
	}

	.box-Right {
		overflow: hidden;
		line-height: 40px;
	}

	.cell {
		width: 50%;
		float: left;
		border-bottom: 1px solid #fff;
		font-size: 14px;

		.cellcon {
			width: 60px;
		}
	}
}

body,
html,
p {
	margin: 0;
	padding: 0px;
}

.body {
	background: #ebeeff;
	padding-bottom: 20px;
	width: 100%;
	// height: 100% !important;
	// position: fixed;
	// top: 0px;
	// left: 0px;
	// overflow: auto;
}

.mainbody {
	padding-left: 10px;
	padding-right: 10px;
}

.header {
	width: 100%;
	height: 110px;
	background: #eef9ff;
	// box-shadow: 0px 10px 22px rgba(0, 0, 0, 0.06);
	opacity: 1;
	text-align: center;
}

.header img {
	position: relative;
	top: 5px;
}

.tabtitle {
	font-size: 14px;
	font-family: Microsoft YaHei;
	font-weight: bold;
	line-height: 24px;
	color: #313747;
	padding-bottom: 6px;
}

.tabtitle span {
	padding-left: 8px;
	display: inline-block;
	font-size: 12px;
	font-family: Microsoft YaHei;
	font-weight: 400;
	line-height: 24px;
	color: #83879a;
}

.tabmain {
	position: relative;
	overflow: hidden;
	height: 255px;
	background: #efffe2;
	// box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.14);
	opacity: 1;
	border-radius: 21px;
}

.tabmainb {
	display: flex;
}

.tabmain .left,
.center {
	padding-top: 40px;
	flex: 0 0 33.3%;
}

.tablist {
	display: flex;
	padding-bottom: 35px;
}

.tabmain .left {
	padding-left: 100px;
}

.center {
	position: relative;
	left: 50px;
}

.right {
	padding-top: 30px;
	text-align: center;
	position: absolute;
	right: 0;
	top: 0px;
	z-index: 3;
	width: 350px;
}

.bg {
	position: absolute;
	right: -300px;
	top: -150px;
	z-index: 2;
	width: 638px;
	height: 614px;
	background: rgba(184, 255, 191, 0.38);
	border-radius: 50%;
	opacity: 1;
}

.right .tabp {
	height: 29px;
	font-size: 22px;
	font-family: Microsoft YaHei;
	font-weight: 400;
	line-height: 18px;
	margin-top: 10px;
	color: #000000;
	text-align: center;
}

.tabt {
	height: 42px;
	font-size: 32px;
	font-family: Microsoft YaHei;
	text-align: center;
	font-weight: bold;
	line-height: 32px;
	color: #000000;
	margin-top: 10px;
}

.tablist img {
	position: relative;
	top: -2px;
}

.tablist span {
	font-size: 14px;
	font-family: Microsoft YaHei;
	font-weight: bold;
	line-height: 19px;
	color: #1a2030;
	padding-left: 10px;
	display: inline-block;
}

.tabWork {
	background: #f5feff;
	height: 255px;
}

.tablistw {
	display: flex;
	height: 51px;
	line-height: 51px;
}

.tablistw p {
	flex: 1;
	flex: 0 75%;
	font-size: 14px;
	font-family: Microsoft YaHei;
	font-weight: 400;
	color: #1a2030;
	padding-left: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tablistw span {
	flex: 1;
	text-align: right;
	padding-right: 20px;
	font-size: 14px;
	font-family: Microsoft YaHei;
	font-weight: 400;
	color: rgba(26, 32, 48, 0.45);
}

.tablistw {
	display: flex;
	flex-wrap: wrap;
}

.mainbody {
	display: flex;
	margin-top: 20px;
}

.Grid-cell {
	flex: 1;
	margin: 0px 10px;
}

.mainlefta {
	background: linear-gradient(322deg, #58b9dd 0%, #58b9dd 33%, #7eeafb 100%);
	// box-shadow: 0px 8px 14px rgba(204, 210, 236, 0.38);
}

.mainlefta:nth-child(2) {
}

.bodytitle {
	width: 100%;
	text-align: center;
	height: 50px;
	position: relative;
}

.bodytitle2 {
	width: 100%;
	position: relative;
	text-align: center;
	margin-top: 20px;
	height: 50px;
	background: linear-gradient(322deg, #58b9dd 0%, #58b9dd 33%, #7eeafb 100%);
	// box-shadow: 0px 8px 14px rgba(204, 210, 236, 0.38);
}

.bodytitle span,
.bodytitle2 span {
	position: absolute;
	right: 20px;
	top: 18px;
	font-size: 12px;
	font-family: Microsoft YaHei;
	font-weight: 400;
	color: #ffffff;
	cursor: pointer;
}

.ra {
	font-size: 14px;
	font-family: Microsoft YaHei;
	font-weight: bold;
	line-height: 50px;
	color: #ffffff;
}

.box-th {
	display: flex;
}

.boxLeft {
	flex: 1;
	flex: 0 0 100px;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	color: #1a2030;

	border-right: 1px solid #fff;
}

.tablistwb {
	background: rgba(222, 240, 255, 0.82);
}

.box-Right {
	flex: 1;
	background-color: #d5f4fb;
	opacity: 0.9;
	border-right: 1px solid #fff;
}

.box-Right .boxmain div {
	color: #000;
	font-size: 12px;
}

.box-R2 .celltit {
	font-weight: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.boxmore {
	position: absolute;
	top: 16px;
	right: 20px;
	font-size: 12px;
	color: #fff;
	cursor: pointer;
}

.boxmaina {
	height: 50px;
	line-height: 50px;
	display: flex;
}

.boxmaina div {
	color: #fff;
	font-size: 14px;
	float: left;
	width: 33%;
	font-weight: bold;
	text-align: center;
}

.boxa .boxmain {
	display: flex;
	height: 40px;
	line-height: 40px;
	border-bottom: 1px solid #fff;
}

.boxa .boxmain div {
	color: #000;
	font-size: 14px;
	float: left;
	width: 33%;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media screen and (max-width: 1680px) {
	.tablistw p {
		flex: 0 70%;
	}

	.tabmain .left {
		padding-left: 20px;
	}

	.center {
		left: 0px;
		flex: 0 0 50%;
	}

	.bg {
		position: absolute;
		right: -210px;
		top: -90px;
		width: 400px;
		height: 400px;
	}

	.right {
		width: 180px;
	}
}

@media screen and (min-width: 1200px) {
	.tablistw p {
		flex: 0 70%;
	}

	.mainleft .tabmain {
		position: relative;
	}

	.mainleft .tabmain .tabmainb {
		position: absolute;
		left: 0px;
		right: 0px;
		z-index: 44;
	}

	.tabmain .left {
		padding-left: 20px;
	}

	.center {
		left: 0px;
		flex: 0 0 50%;
	}

	.bg {
		position: absolute;
		right: -210px;
		top: -90px;
		width: 400px;
		height: 400px;
	}

	.right {
		width: 180px;
	}

	.tabt {
		height: 30px;
		font-size: 28px;
		font-weight: 200;
		text-align: center;
		font-weight: bold;
		line-height: 30px;
		color: #000000;
		margin-top: 10px;
	}

	.right .tabp {
		height: 18px;
		font-size: 18px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		line-height: 18px;
		margin-top: 5px;
		color: #000000;
		text-align: center;
	}

	.tablist span {
		padding-left: 7px;
	}
}

@media screen and (max-width: 1560px) {
	.tablistw p {
		flex: 0 65%;
	}
}

@media screen and (max-width: 1366px) {
	.right {
		width: 190px;
		padding-top: 20px;
	}

	.center {
		left: 0px;
		flex: 0 0 37%;
	}

	.bg {
		position: absolute;
		right: -200px;
		top: -90px;
		width: 400px;
		height: 400px;
	}

	.tablist {
		padding-bottom: 25px;
	}

	.tabmain {
		height: 210px;
	}

	.tablistw {
		height: 42px;
		line-height: 42px;
	}

	.tablistw p {
		flex: 0 75%;
	}

	.tabt {
		height: 30px;
		font-size: 28px;
		font-weight: 200;
		text-align: center;
		font-weight: bold;
		line-height: 18px;
		color: #000000;
		margin-top: 10px;
	}

	.right .tabp {
		height: 18px;
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		line-height: 18px;
		margin-top: 0px;
		color: #000000;
		text-align: center;
	}
}
</style>
